<template>
  <el-dialog
    :visible.sync="pup.state"
    :width="pup.width || '500px'"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :fullscreen="pup.full"
  >
    <div
      class="pupBox"
      :style="{
          height:pup.full?'100vh':pup.height,
      }"
    >
      <div class="pupBox-head">
        <div>
          <h3>{{pup.title}}{{typeName(pup.titleType)}}</h3>
        </div>
        <div class="el-icon-close"  @click="closePup"></div>
      </div>
      <div
        class="pupBox-main"
      >
        <el-scrollbar>
          <div :style="{padding:padding+'px',}">
            <template v-if="pup.form">
              <el-form
                ref="pupForm"
                :model="pup.form"
                :rules="pup.rules"
                :label-position="labelPosition"
                :label-width="labelWidth+'px'"
                :size="size"
                :disabled="typeDisabled(pup.titleType)"
              >
                <slot></slot>
              </el-form>
            </template>
            <template v-else>
              <slot></slot>
            </template>
          </div>
        </el-scrollbar>
      </div>
      <div class="pupBox-foot" v-if="!pup.isFoot">
        <div></div>
        <div class="pupBtn">
          <el-button size="medium" @click="closePup">
            <p>取消</p>
          </el-button>
          <template v-if="[1,2].includes(pup.titleType) || (!pup.titleType && isSubmit)">
            <el-button
                type="primary"
                size="medium"
                @click="onSubmit"
                :loading="pup.loading"
            >
              <p>保存</p>
            </el-button>
            <slot name="footButton" v-if="$scopedSlots.footButton"></slot>
          </template>
          <template v-else-if="[4].includes(pup.titleType)">
            <el-button
                type="success"
                size="medium"
                @click="passSubmit"
                :loading="pup.loading"
            >
              <p>通过</p>
            </el-button>
            <el-button
                type="danger"
                size="medium"
                @click="refuseSubmit"
                :loading="pup.loading"
            >
              <p>拒绝</p>
            </el-button>
          </template>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "PupBox",
  props: {
    pup:{
      type:Object,
    },
    size:{
      type:String,
    },
    padding:{
      type:Number,
      default: () => {
        return 16;
      },
    },
    labelPosition:{
      type:String,
      default: () => {
        return 'right';
      },
    },
    labelWidth:{
      type:Number,
      default: () => {
        return 90;
      },
    },
    isSubmit:{
      type:Boolean,
      default: () => {
        return true;
      },
    },
  }, // 获取父组件数据
  components: {
  },
  mounted() {
    if (this.pup.form){
      this.formCode=JSON.parse(JSON.stringify(this.pup.form))
    }
  },
  data() {
    return {
      formCode:null,
    };
  },
  watch:{
    "pup.state":{
      handler: function(val) {
        if (!val){
          this.pup.loading=false
          if (this.formCode && this.pup.form){
            //表单恢复初始化
            setTimeout(() => {
              this.pup.form=JSON.parse(JSON.stringify(this.formCode))
            }, 100); // 延迟1000毫秒（即1秒钟）执行
          }
        }else{
          if (this.formCode && this.pup.form){
            //清除验证
            this.$nextTick(()=>{
              this.$refs.pupForm.clearValidate();
            })
          }
        }
      },
      deep:true
    },
  },
  methods: {
    //关闭弹窗
    typeName(val){
      let typeName=''
      if (val){
        if (val===1){
          typeName='-新增'
        }else if (val===2){
          typeName='-编辑'
        }else if (val===3){
          typeName='-查看'
        }else if (val===4){
          typeName='-审核'
        }else{
          typeName='-'+val
        }
      }
      return typeName
    },
    //关闭弹窗
    typeDisabled(val){
      let typeDisabled=false
      if (val){
        //查看
        if (![1,2].includes(val)){
          typeDisabled=true
        }
      }
      return typeDisabled
    },
    //关闭弹窗
    closePup(){
      this.pup.state=false
      this.pup.loading=false
    },
    //确认
    onSubmit(){
      if (this.pup.form){
        this.$refs.pupForm.validate((valid) => {
          if (valid) {
            this.pup.loading=true
            this.$emit('onSubmit',this.pup)
          } else {
            this.errorScroll()
          }
        });
      }else{
        this.pup.loading=true
        this.$emit('onSubmit',this.pup)
      }
    },
    //通过
    passSubmit(){
      this.pup.loading=true
      this.$emit('passSubmit',this.pup)
    },
    //拒绝
    refuseSubmit(){
      this.pup.loading=true
      this.$emit('refuseSubmit',this.pup)
    },
    errorScroll(callback) {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        isError[0].scrollIntoView({
          // 滚动到指定节点
          block: 'center',
          behavior: 'smooth'
        })
        if (isError[0].querySelector('.el-input__inner')){
          isError[0].querySelector('.el-input__inner').focus()
        }
        if (callback) {
          if (typeof callback !== 'function') {
            throw new TypeError(callback + 'is not a function')
          } else {
            callback()
          }
        }
      })
    }
  },
  computed: {

  }
};
</script>
<style  lang="scss" scoped>
.el-dialog__wrapper::v-deep{
  display: flex;
  align-items: center;
  justify-content: center;
  .el-dialog{
    margin: 0!important;
    max-width: 1920px;
    &:not(.is-fullscreen){
      border-radius: 4px;
      box-shadow: 0 3px 16px rgba(0,0,0,0.1);
    }
    overflow: hidden;
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      padding: 0;
    }
  }
}
.pupBox{
  display: flex;
  flex-direction: column;
  max-height:100vh;
  >*{
    &:not(:last-child){
      border-bottom: 1px #e6e6e6 solid;
    }
    &:not(.pupBox-main){
      height: 48px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &.pupBox-main{
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .pupBtn{
      margin-right: -8px;
    }
    .el-icon-close{
      width:32px;
      height:32px;
      display: flex!important;
      align-items: center;
      justify-content: center;
      font-size:18px;
      border-radius: 4px;
      margin-right: -8px;
      cursor: pointer;
      &:hover{
        background: #e13335;
        color: #fff;
      }
    }
  }
}
</style>
